@use 'variables' as *;

html {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Icons',
    'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  background-color: $background-color;
  color: $text-primary;
  transition: background-color 0.3s ease, color 0.3s ease;
}

// 暗黑模式全局样式
body.dark {
  background-color: #000000;
  color: #f5f5f7;

  // Element Plus 卡片样式覆盖
  .el-card {
    background-color: rgba(44, 44, 46, 0.7) !important;
    border-color: rgba(82, 82, 89, 0.68) !important;
    color: #f5f5f7;
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);

    &:hover {
      background-color: rgba(58, 58, 60, 0.8) !important;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    }
  }

  // 导航栏暗色模式
  .nav-header {
    background-color: rgba(22, 22, 23, 0.8) !important;
    border-bottom-color: rgba(82, 82, 89, 0.68) !important;
  }

  // Element Plus 其他组件暗色模式
  --el-bg-color: #1d1d1f;
  --el-bg-color-overlay: #1d1d1f;
  --el-text-color-primary: #f5f5f7;
  --el-text-color-regular: #a1a1a6;
  --el-text-color-secondary: #86868b;
  --el-border-color: #424245;
  --el-border-color-light: #2d2d2d;
  --el-fill-color-blank: #1d1d1f;
  --el-mask-color: rgba(0, 0, 0, 0.8);
  --el-color-primary: #2997ff;
} 